<template>
	<view class="content">
		<view class="login">
			<view>
				<image class="lImg"></image>
				<view :class="[state==1?'mines':'mine']"  @click="login">
					<image :src="$host+src" mode="widthFix"></image>				
					<view class="user" v-show=!state> 登录/注册</view>	
						 <view id="baize" v-show=state> {{name}} </view>
				</view>
				  
			</view>
			
		</view>
		<view class="middle">
			 <view class="one">
				 <view  @click="moneys">
					<image src="../../static/yue.png" mode="widthFix"></image>
					  <text>余额(元)</text>
					   <text class="color">{{money}}</text>
				 </view>
				  <view > 
				<image src="../../static/卡券.png" mode="widthFix"></image>
					  <text>卡券</text>
					   <text class="color">{{car}}</text></view>
				   <view class="three" @click="cars">
					  <image src="../../static/积分.png" mode="widthFix" id="jf"></image>
					    <text>积分</text>
					     <text class="color">{{score}}</text>
				   </view>
			 </view>
			 <view class="two">
				   <view class="fk" @click="order"><image src="../../static/order_pay.png" mode="widthFix" id="pay"></image>
				     <view>待付款</view>
				   </view>
				 <view @click="toget"><image src="../../static/代发货 1.png" mode="widthFix"></image>
				  <view>待发货</view></view>
				  <view class="sh" @click="togets"><image src="../../static/待收货.png" mode="widthFix" id="shouhuo"></image>
				   <view>待收货</view></view>
				    <view class="myh" @click="toget"><image src="../../static/我的订单.png" mode="widthFix"></image>
					 <view class="orderssss">我的订单</view></view>
			 </view>
		</view>
		<view class="bottom">
			<view class="door">
				<view>
					<image src="../../static/意见反馈.png" mode="widthFix"></image> <text class="ab">反馈通道</text>
				</view>
				<view @click="getMapLocation">
					<image src="../../static/门店.png" mode="widthFix"></image> <text class="ac">门店地址</text>
				</view>
			</view>
					
			<view class="set" @click="myself">
				<image src="../../static/设置.png" mode="widthFix"></image> <text class="ad">设置</text>
			</view>
			<view class="hy" @click="takemoney">
				<image src="../../static/会员.png" mode="widthFix"></image> <text class="ab">会员储值</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			
			return{
				src:"login.png",
				hides:true,
				name:"",
				money:0,
				car:0,
				score:0,
				$host:this.$host,
				state:0
				
			}
		},
		methods:{
				
			getMapLocation(){
			 uni.chooseLocation({
			  success:(res)=> {
			   console.log(res);
			   // this.getRegionFn(res);
			  },
			  fail:()=>{
			   // 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
			   uni.getSetting({
			    success: (res) => {
			     console.log(res);
			     var status = res.authSetting;
			     if(!status['scope.userLocation']){
			     // 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
			      uni.showModal({
			       title:"是否授权当前位置",
			       content:"需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
			       success:(tip)=>{
			        if(tip.confirm){
			        // 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
			         uni.openSetting({
			          success:(data)=>{
			          // 如果用户授权了地理信息在，则提示授权成功
			           if(data.authSetting['scope.userLocation']===true){
			            uni.showToast({
			             title:"授权成功",
			             icon:"success",
			             duration:1000
			            })
			            // 授权成功后，然后再次chooseLocation获取信息
			            uni.chooseLocation({
			             success: (res) => {
			              console.log("详细地址",res);
			              // this.getRegionFn(res);
			             }
			            })
			           }else{
			            uni.showToast({
			             title:"授权失败",
			             icon:"none",
			             duration:1000
			            })
			           }
			          }
			         })
			        }
			       }
			      })
			     }
			    },
			    fail: (res) => {
			     uni.showToast({
			      title:"调用授权窗口失败",
			      icon:"none",
			      duration:1000
			     })
			    }
			   })
			  }
			 });
			},
			toget(){
				uni.navigateTo({
					url:`/pages/mine/order?id=0`
				})
			},	togets(){
				uni.navigateTo({
					url:`/pages/mine/order?id=2`
				})
			}
				,
			order(){
				uni.navigateTo({
					url:`/pages/mine/order?id=1`
				})
			},
			cars(){
				 uni.navigateTo({
				 	url:`/pages/mine/car?score=${this.score}`
				 })
			},
			myself(){
			if(this.state==0){
							  uni.redirectTo({
							  	url:"/pages/mine/login"
							  })
			  }else{
							   uni.navigateTo({
							   	url:"/pages/mine/myself"
							   })  
							      
			  }
			  
			
			},
			takemoney(){
				uni.navigateTo({
					url:"/pages/mine/makemoney"
				})
			},
			 login(){
			      if(this.state==0){
					  uni.navigateTo({
					  	url:"/pages/mine/login"
					  })
				  }else{
					  uni.navigateTo({
					  	url:"/pages/mine/setmyself"
					  })
				  }
			 },
			 moneys(){
			   if(this.state==0){
				  uni.redirectTo({
				  	url:"/pages/mine/login"
				  })
			   }else{
				   uni.navigateTo({
				   	url:`/pages/mine/money?money=${this.money}`
				   })  
				      
			   }
			   
			 }
			 
			  
			  
		},
	onShow() {
		this.$request("/getUserData","post",{}).then(res=>{
			this.state=res.data[0].state
		   if(this.state==0){
			   this.src="login.png"
			   this.car=0
			   this.money=0
			   this.score=0
		   }else{
			        this.src= res.data[0].src
					  this.name= res.data[0].name
					   this.money= res.data[0].money
					    this.car= res.data[0].car
						 this.score= res.data[0].score
					  
		   }
		})
		
	   }
		
	}
</script>

<style>
	.orderssss{
		margin-top: 4rpx;
	}
	.hy{
		position: relative;
		top: -40px;
		left: 210px;
		width: 123px;
	}
	#baize{
		color: white;
			font-size: 50rpx;
			position: relative;
			top: 25rpx;
			left: 33rpx;
	}
	.login{
		background: url("http://172.16.114.183:8888/my.jpg");
		background-size: 139%;
		background-position: -20px,50px;
	}
	.lImg{
		height:200px;
	}
	.mine{
		width: 97px;
		height: 97px;
		background-color:#f1f1f1;
		border-radius: 50%;
		position: relative;
		top: -140px;
		left: 132.5px;
	}
	.mines{
		width: 80px;
		height: 80px;
		background-color:#f1f1f1;
		border-radius: 50%;
		position: relative;
		top: -140px;
		left: 148.5px;
	}
	.user{
		width: 200px;
		color: #b2b2b2;
		font-size: 50rpx;
		position: relative;
		top: 40px;
	}
	.mine>image{
		width: 66px;
		height: 66px;
		position: relative;
		top: 32rpx;
		left: 18px;
		
	}
	.mines>image{
		border-radius: 50%;
		width: 80px;
		height: 80px;
		position: relative;
		top: -1rpx;
		
	}
	/* 中间部分 */
	.one{
		display: flex;
		justify-content: space-around;
	}
	.one image{
		width: 60rpx;
		margin-top: 10px;
	}
	.one>view{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#jf{
		width: 60rpx;
	
		
	}

	.color{
		color: #fea87d;
	}
.two image{
	 width: 52rpx;
}
.two{
	display: flex;
	justify-content: space-between;

}
#pay{
	width: 68rpx;
	
}
#shouhuo{
	width: 65rpx;
}
.fk{
	position: relative;
	  top: -10rpx;
	  margin-left: 12rpx;
}
.sh{
	 position:relative;
	 top: -4rpx;
}
.myh{
	margin-right: 12rpx;
	margin-top: 4rpx;
}
.two>view{
	text-align: center;
}
/* 下半部分 */
.bottom image{
	 width: 72rpx;
}
.door{
	 display: flex;
	 justify-content: space-around;
	 position: relative;
	 left: -30rpx;
}
.set{
	margin-left: 36rpx;
	margin-top: 36rpx;
}
.bottom{
	 margin-top:46rpx;
}
.ab{
	  position: relative;
	  top: -14px;
	  margin-left: 21rpx;
}
.ac{
	  position: relative;
	  top: -11px;
	  margin-left: 21rpx;
}
.ad{
	  position: relative;
	  top: -11px;
	  margin-left: 21rpx;
}
</style>